<template>
  <div class="app">
    <router-view />
  </div>
</template>

<script lang="ts">
import { provide, ref } from 'vue';
import { router } from './router';

export default {
  name: 'App', 
  setup() {
    const width = document.documentElement.clientWidth;
    const asideVisible = ref(width > 500);
    provide('asideVisible', asideVisible);

    router.afterEach((to, from) => {
      asideVisible.value = (width > 500);
    });
  }
}
</script>

<style lang="scss">
  #app {
    height: 100vh;
    width: 100%;
  }
</style>
